<template>
  <div>
    <div class="box">
      <van-search
        v-model="value"
        placeholder="请输入小区或地址"
        background="transparent"
        show-action
      >
        <template #label>
          <span @click="city">{{ currentcity.label }}▼ |</span>
        </template>
        <template #action>
          <i class="iconfont icon-ditu" @click="$router.push('/map')"></i>
        </template>
      </van-search>
    </div>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in list" :key="item.id"
          ><img :src="`http://liufusong.top:8080${item.imgSrc}`" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-grid>
        <van-grid-item icon="photo-o" text="整租" />
        <van-grid-item icon="photo-o" text="合租" />
        <van-grid-item icon="photo-o" text="地图找房" />
        <van-grid-item icon="photo-o" text="去出租" />
      </van-grid>
    </div>
    <div class="box3">
      <span class="span1">租房小组</span> <span class="span2">更多</span>
    </div>
    <div class="box2">
      <van-grid :column-num="2" gutter="10px" direction="horizontal">
        <van-grid-item icon="" text="" v-for="item in group" :key="item.id">
          <span class="box5"
            ><img :src="`http://liufusong.top:8080${item.imgSrc}`" alt=""
          /></span>
          <span class="box4">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getStorage } from '@/utils/storage'
import { getShuffling, getGroup } from '@/api/user'
export default {
  name: 'home-page',
  components: {},
  props: {},
  data() {
    return {
      value: '',
      list: [],
      group: [],
      currentcity: JSON.parse(getStorage('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getShuffling()
    this.list = res.data.body
    // console.log(this.list)
    const reg = await getGroup()
    // console.log(reg)
    this.group = reg.data.body
  },
  methods: {
    city() {
      this.$router.push('/citylist')
    }
  }
}
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  height: 212px;
  color: #fff;
  text-align: center;
  background-color: #39a9ed;
}
img {
  width: 100%;
}
::v-deep .box {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: 99999999;
}
.span2 {
  float: right;
}
.box3 {
  margin: 10px 0;
}
.box5 {
  width: 50px;
  height: 50px;
  margin: 0 10px;
}
.box4 {
  font-size: 14px;
}
</style>
